<template>
  <ul class="music-list">
    <li
      v-for="(item, index) in songs"
      :key="item.rid"
      @click="handleClick(item, index)"
      >
      <div v-if="rank" class="rank">
        <div :class="rankClass(index)">{{rankText(index)}}</div>
      </div>
      <div class="item">
        <h1>{{item.name}}</h1>
        <p>{{item.artist}}·{{item.album}}</p>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'SongList',
  props: {
    songs: {
      type: Array,
      default () {
        return []
      }
    },
    rank: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick (song, index) {
      // song 为当前点击的歌曲相关数据；index 为当前索引
      this.$emit('select', song, index)
    },
    rankClass (index) {
      if (index > 2) {
        return 'text'
      } else {
        return `icon-${index}`
      }
    },
    rankText (index) {
      if (index > 2) {
        return index + 1
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~common/stylus/variable.styl'
  @import '~common/stylus/mixin.styl'
  .music-list {
    padding: 27px 24px 0 24px
    background: $color-background
    li {
      display: flex
      padding-bottom: 21px
      font-size: $font-size-small
      .rank {
        width: 24px
        height: 24px
        margin-right: 20px
        align-self: center
        text-align: center
        .text {
          color: $color-theme
          font-size: $font-size-medium
        }
        .icon-0 {
          width: 100%
          height: 100%
          bg-image(first)
          background-size: contain
        }
        .icon-1 {
          width: 100%
          height: 100%
          bg-image(second)
          background-size: contain
        }
        .icon-2 {
          width: 100%
          height: 100%
          bg-image(third)
          background-size: contain
        }
      }
      .item {
        flex: 1
        h1 {
          font-weight: bold
        }
        p {
          margin-top: 8px
          font-weight: bold
          color: $color-text-d
          no-wrap()
        }
      }
    }
  }
</style>
